<template>
  <div>
    <div class="home">
      <!-- 搜索 -->
      <div class="home-search">
        <div>
          <img src="../../assets/img/banner.png" alt />
        </div>
        <div>
          <span @click="property(name)" class="fa fa-search"></span>
          <input v-model="name" type="text" placeholder="国家/城市/项目名" />
          <span>房源/STO</span>
        </div>
        <div @click="$router.go(-1)">取消</div>
      </div>
      <!-- 标题 -->
      <div class="title">
        <div>
          <img src="../../assets/img/remen.png" alt />
          <span>热门搜索</span>
        </div>
        <span></span>
      </div>
      <!-- list类别 -->
      <div class="history-list">
        <p>国家</p>
        <div>
          <span>泰国</span>
          <span>泰国</span>
          <span>泰国</span>
          <span>泰国</span>
          <span>泰国</span>
          <span>泰国</span>
        </div>
      </div>
      <!-- 标题 -->
      <div class="title">
        <div>
          <img src="../../assets/img/lishi.png" alt />
          <span>历史记录</span>
        </div>
        <span>
          <img src="../../assets/img/lajixiang.png" alt />
        </span>
      </div>
      <!-- list类别 -->
      <div class="history-list">
        <p></p>
        <div>
          <span>泰国</span>
          <span>泰国</span>
          <span>泰国</span>
          <span>泰国</span>
          <span>泰国</span>
          <span>泰国</span>
        </div>
      </div>
    </div>
  </div>
</template>

 
<script>
export default {
  data() {
    return {
      name: "" //搜索
    };
  },
  methods: {
    property(one) {
      alert("111");
      this.$router.push({
        path: "source",
        query: {
          name: one
        }
      });
    },
   
  },

  watch: {
    name() {
      var params = {
        countryName: this.name
      };
      
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  position: absolute;
  background-color: #eee;
  height: 100%;
  width: 100%;
  overflow: scroll;
}
//搜索
.home-search {
  .flexAroundCenter();
  height: 50px;
  box-shadow: 0 0 5px 1px #eee;
  color: @blackColor5;
  background-color: @white;
  div:first-child {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    .flexCenter();
    align-content: center;
  }
  div:nth-child(2) {
    .flexAroundCenter();
    font-size: 12px;
    width: 70%;
    height: 30px;
    padding: 0 8px;
    background-color: #eee;
    border-radius: 10px;
    color: @word3;
    span:first-child {
      font-size: 16px;
    }
    input {
      width: 50%;
      background-color: #eee !important;
      border: none;
      padding-left: 4px;
      font-size: 10px;
      color: @word3;
    }
    span:nth-child(3) {
      border-left: 1px solid #ccc;
      padding-left: 10px;
    }
  }
  > div:nth-child(3) {
    font-size: 14px;
  }
}
.title {
  width: 90%;
  margin: 0 auto;
  font-size: 14px;
  color: @blackColor5;
  .flexBetweenCenter();
  padding: 15px 15px;
  border-bottom: 1px solid #d5d5d5;
  > div {
    .flexStartCenter();
    img {
      width: 15px;
      margin-right: 8px;
    }
  }
  img {
    width: 20px;
  }
}
.history-list {
  width: 90%;
  margin: 0 auto;
  p {
    color: @blackColor8;
    font-size: 13px;
    padding: 8px 0;
  }
  div {
    padding: 0 4px;
    .flexStart();
    flex-wrap: wrap;
    span {
      width: 20%;
      display: inline-block;
      font-size: 14px;
      background-color: @white;
      border-radius: 4px;
      text-align: center;
      padding: 8px 0;
      margin-right: 5%;
      margin-bottom: 10px;
    }
  }
}
</style>
